<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的艺考合格证 - 流白艺考</title>
    <link rel="stylesheet" type="text/css" href="static/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
    <style type="text/css">
    </style>
  </head>
  <body>
    <div id="before">
      <img id="bg" src="static/images/bg.jpg" onload="bgOnload()">
      <div id="button" class="button" onclick="start()">
        <div id="loader" class="pacman"><div></div><div></div><div></div><div></div><div></div></div>
        <span id="button-title">抽取合格证</span>
      </div>
    </div>
    <div id="after">
      <img id="certificate" usemap="#back" onload="imageLoaded()" onerror="start()">
      <div id="tips">
        <span id="tip-1">恭喜你！</span>
        <small id="tip-2">小提示：点击图片保存到本地让好运更持久，然后再试一次！</small>
      </div>

      <map name="back" id="back">
        <area
          id="area"
          shape="circle"
          coords="0,0,80"
          href ="#"
          onclick="back()"
          alt="Back" />
      </map>
    </div>
    <script type="text/javascript">
      function getRandomInt (max) {
        return Math.floor(Math.random() * Math.floor(max))
      }
      const ratio = 320 / 502.78 // width / height
      const { availWidth, availHeight } = window.screen
      const beforeDOM = document.getElementById('before')
      const bgDOM = document.getElementById('bg')
      const width = availWidth > availHeight ? availHeight * ratio : availWidth
      const height = availWidth > availHeight ? availHeight : availWidth / ratio
      bgDOM.style.width = width + 'px'
      bgDOM.style.height = height + 'px'
      const afterDOM = document.getElementById('after')
      const buttonDOM = document.getElementById('button')
      buttonDOM.style.top = height * 0.89 + 'px'
      const areaDOM = document.getElementById('area')
      areaDOM.setAttribute('coords', `0, 0, ${(0.8 * availHeight)*ratio/5}`)
      const loaderDOM = document.getElementById('loader')
      const btnTitleDOM = document.getElementById('button-title')
      const certificateDOM = document.getElementById('certificate')
      const tipsDOM = document.getElementById('tips')
      const tip1DOM = document.getElementById('tip-1')
      const tip2DOM = document.getElementById('tip-2')

      const single1 = [52, 53, 54]
      const single2 = [55, 56]
      const double = [1, 4, 5, 8, 11, 12, 13, 19, 20, 21, 22, 28, 29, 30, 31, 38, 39, 40, 41, ]
      const triple = [2, 6, 9, 14, 15, 23, 24, 25, 32, 33, 34, 42, 43, 44, 45, 46, 47,   ]
      const quadra = [3, 7, 10, 16, 17, 18, 26, 27, 35, 36, 37, 48, 49, 50, 51, ]
      const penta = [57, 58, 59]
      function bgOnload () {
        document.body.style.backgroundColor = '#ffc284'
      }
      function start () {
        buttonDOM.className = 'button disabled'
        loaderDOM.style.display = 'block'
        btnTitleDOM.innerHTML = '正在抽取你的合格证'
        let imageURL

        // 30, 25, 20, 15, 10
        const r1 = getRandomInt(100)
        if (r1 < 30) {
          const r2 = getRandomInt(70)
          if (r2 < 30) {
            imageURL = `./static/images/c${single1[getRandomInt(single1.length)]}.png`
          } else {
            imageURL = `./static/images/c${single2[getRandomInt(single2.length)]}.png`
          }
          tip1DOM.innerHTML = '恭喜你！获得一张合格证！'
        } else if (r1 < 55) {
          imageURL = `./static/images/c${double[getRandomInt(double.length)]}.png`
          tip1DOM.innerHTML = '恭喜你！获得两张合格证！'
        } else if (r1 < 75) {
          imageURL = `./static/images/c${triple[getRandomInt(triple.length)]}.png`
          tip1DOM.innerHTML = '恭喜你！获得三证卡！'
        } else if (r1 < 90) {
          imageURL = `./static/images/c${quadra[getRandomInt(quadra.length)]}.png`
          tip1DOM.innerHTML = '恭喜你！获得四证卡！再接再厉！'
        } else {
          const r2 = getRandomInt(100)
          if (r2 < 50) {
            imageURL = `./static/images/c${penta[getRandomInt(penta.length)]}.png`
            tip1DOM.innerHTML = '恭喜你！获得五证卡！距离考神还差一步！'
          } else {
            imageURL = `./static/images/god.png`
            tip1DOM.innerHTML = '恭喜你！获得考神卡！'
            tip2DOM.innerHTML = '小提示：请点击图片保存好运并截图发送给流白艺考公众号，获取考神福利！'
          }
        }
        certificateDOM.setAttribute('src', imageURL)
      }
      function imageLoaded () {
        beforeDOM.style.display = 'none'
        afterDOM.style.display = 'flex'
        tipsDOM.style.display = 'flex'
        document.body.style.backgroundColor = '#fff'
      }
      function back() {
        buttonDOM.className = 'button'
        loaderDOM.style.display = 'none'
        btnTitleDOM.innerHTML = '抽取合格证'
        beforeDOM.style.display = 'flex'
        afterDOM.style.display = 'none'
        tipsDOM.style.display = 'none'
        document.body.style.backgroundColor = '#ffc284'
      }
    </script>
  </body>
</html>
